<template>
	<transition name="page-toggle">
		<div
			class="flex flex-v pro-grid-content flex-1"
			:class="{ wide: contentWidth == 'Fixed' }"
			style="min-height: calc(100vh - 60px); height: calc(100vh - 60px); transition: all 0.2s ease 0s"
		>
			<!-- <div class="pro-grid-content" :class="{ wide: contentWidth == 'Fixed' }" style="min-height: calc(100vh - 60px); height: calc(100vh - 60px); transition: all 0.2s ease 0s;" > -->
			<!-- <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect" />
			<a-tabs
				v-if="multiTab"
				:active-key="activePage"
				class="tab-layout-tabs"
				:hide-add="true"
				type="editable-card"
				@change="changePage"
				@tabClick="tabCallBack"
				@edit="editPage"
				@contextmenu.native="e => onContextmenu(e)"
			>
				<a-tab-pane :id="page.path" :key="page.path" v-for="page in pageList">
					<span slot="tab" :pagekey="page.path">{{ page.meta.title }}</span>
				</a-tab-pane>
			</a-tabs> -->
			<!-- include 包含的name不是route中的name而是vue页面中的name -->
			<keep-alive :include="cachedViews"><router-view :key="key" /></keep-alive>
		</div>
	</transition>
</template>

<script>
import { mapState } from 'vuex'
import Contextmenu from '@/components/menu/Contextmenu'
import bus from '@/utils/eventBus'
export default {
	name: 'RouteView',
	data() {
		return {
			breadList: [],
			activePage: '',
			pageList: [],
			linkList: [],
			menuVisible: false,
			menuItemList: [
				{
					key: '4',
					icon: 'reload',
					text: '刷 新',
				},
				{
					key: '1',
					icon: 'arrow-left',
					text: '关闭左侧',
				},
				{
					key: '2',
					icon: 'arrow-right',
					text: '关闭右侧',
				},
				{
					key: '3',
					icon: 'close',
					text: '关闭其它',
				},
			],
			reloadFlag: true,
			multipage: true,
		}
	},
	computed: {
		cachedViews() {
			return this.$store.state.cachedViews
		},
		key() {
			return this.$route.path
		},
		getTitle() {
			return this.$route.meta.title
		},
		...mapState({
			multiTab: (state) => state.app.multiTab, //ADD it
			contentWidth: (state) => state.app.contentWidth, //ADD it
		}),
	},
	components: {
		Contextmenu,
	},
	created() {
		this.pageList.push(this.$route)
		this.linkList.push(this.$route.path)
		this.activePage = this.$route.path
		this.$store.dispatch('addView', this.$route)
	},

	mounted() {
		bus.$off('closePage') //销毁
		bus.$on('closePage', (newPage) => {
			this.closeCurrent(newPage)
		})
	},
	watch: {
		$route(newRoute) {
			if (newRoute.name === 'redirect' || newRoute.name == 'login' || newRoute.path == '/404') {
				return false
			}
			// newRoute.meta.keepAlive=true;
			this.activePage = newRoute.path
			if (!this.linkList.includes(newRoute.path)) {
				this.linkList.push(newRoute.path)
				this.pageList.push(Object.assign({}, newRoute))
			} else {
				let oldIndex = this.linkList.findIndex((item) => newRoute.path == item)
				let oldPositionRoute = this.pageList[oldIndex]
				this.pageList.splice(
					oldIndex,
					1,
					Object.assign({}, newRoute, {
						meta: oldPositionRoute.meta,
					})
				)
				console.log('newRoute', newRoute, this.pageList)
			}
			this.$store.dispatch('addView', newRoute)
		},
		activePage: function (key) {
			let index = this.linkList.lastIndexOf(key)
			let waitRouter = this.pageList[index]
			console.log('waitRouter', waitRouter)
			this.$ls.set('secondselectKey', waitRouter.name)
			this.$router.push(Object.assign({}, waitRouter))
			// this.changeTitle(waitRouter.meta.title)
		},
	},
	methods: {
		changePage(key) {
			this.activePage = key
		},
		tabCallBack() {
			this.$nextTick(() => {
				// triggerWindowResizeEvent()
			})
		},
		editPage(key, action) {
			this[action](key)
		},
		remove(key, newPage) {
			if (this.pageList.length === 1) {
				// this.$message.warning('这是最后一页，不能再关闭了啦');
				//直接返回首页
				this.$router.push({
					path: '/',
				})
				return
			} else {
				this.$router.back()
				return
			}

			let index = this.linkList.indexOf(key)
			/* 需要删除  */
			// this.$store.dispatch('delCachedView', this.pageList[index]);
			this.$store.dispatch('delView', this.pageList[index])
			this.pageList = this.pageList.filter((item) => item.path !== key)
			this.linkList = this.linkList.filter((item) => item !== key)
			if (!newPage || !this.linkList.includes(newPage)) {
				index = index >= this.linkList.length ? this.linkList.length - 1 : index
				this.activePage = this.linkList[index]
			} else {
				this.activePage = newPage
			}
			alert('this.activePage', this.activePage)
			//let secondselectKey = this.$ls.set('secondselectKey') || '';
		},
		onContextmenu(e) {
			const pagekey = this.getPageKey(e.target)
			if (pagekey !== null) {
				e.preventDefault()
				this.menuVisible = true
			}
		},
		getPageKey(target, depth) {
			depth = depth || 0
			if (depth > 2) {
				return null
			}
			let pageKey = target.getAttribute('pagekey')
			pageKey =
				pageKey ||
				(target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
			return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
		},
		onMenuSelect(key, target) {
			let pageKey = this.getPageKey(target)
			switch (key) {
				case '1':
					this.closeLeft(pageKey)
					break
				case '2':
					this.closeRight(pageKey)
					break
				case '3':
					this.closeOthers(pageKey)
					break
				case '4':
					this.routeReload()
					break
				default:
					break
			}
		},
		/**
		 * @param {Object} newPage  关闭后，打开的新也买你
		 */
		closeCurrent(newPage) {
			this.remove(this.activePage, newPage)
		},
		/* update_end author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
		closeOthers(pageKey) {
			let index = this.linkList.indexOf(pageKey)
			this.linkList = this.linkList.slice(index, index + 1)
			this.pageList = this.pageList.slice(index, index + 1)
			this.activePage = this.linkList[0]
			this.$store.dispatch('setView', this.pageList)
			// this.$store.dispatch('setCachedView', this.pageList);
		},
		closeLeft(pageKey) {
			let tempList = [...this.pageList]
			let index = this.linkList.indexOf(pageKey)
			this.linkList = this.linkList.slice(index)
			this.pageList = this.pageList.slice(index)
			if (this.linkList.indexOf(this.activePage) < 0) {
				this.activePage = this.linkList[0]
			}
			this.$store.dispatch('setView', this.pageList)
			// this.$store.dispatch('setCachedView', this.pageList);
		},
		closeRight(pageKey) {
			let index = this.linkList.indexOf(pageKey)
			this.linkList = this.linkList.slice(0, index + 1)
			this.pageList = this.pageList.slice(0, index + 1)
			if (this.linkList.indexOf(this.activePage < 0)) {
				this.activePage = this.linkList[this.linkList.length - 1]
			}
			this.$store.dispatch('setView', this.pageList)
			// this.$store.dispatch('setCachedView', this.pageList);
		},
		//update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
		dynamicRouterShow(key, title) {
			let keyIndex = this.linkList.indexOf(key)
			if (keyIndex >= 0) {
				let currRouter = this.pageList[keyIndex]
				let meta = Object.assign({}, currRouter.meta, {
					title: title,
				})
				this.pageList.splice(
					keyIndex,
					1,
					Object.assign({}, currRouter, {
						meta: meta,
					})
				)
				if (key === this.activePage) {
					this.changeTitle(title)
				}
			}
		},
		routeReload() {
			this.$store.dispatch('delCachedView', this.$route).then(() => {
				this.$nextTick(() => {
					this.$router.replace({
						path: '/redirect' + this.$route.fullPath,
					})
				})
			})
		},
	},
}
</script>

<style scoped lang="less">
/deep/ .tab-layout-tabs {
	margin-bottom: 0;
}
/deep/ .ant-tabs-bar {
	margin-bottom: 2px;
	background: #fff;
}
/deep/ .ant-tabs-tabpane {
	height: 2px;
}
.pro-grid-content {
	// height: 100%;
	/* padding: 0 12px; */
	padding: 0;
	min-height: 0;
	width: 100%;
	text-align: left;
	// background: rgba(250, 251, 255, 0.39);
	&.wide {
		max-width: 1200px;
		margin: 0 auto;
	}
}
</style>
